<template>
  <el-card class="m-8">
    <section slot="header" class="flex items-center">
      <el-radio-group v-model="dateType" class="mr-4">
        <el-radio-button :label="1">今日</el-radio-button>
        <el-radio-button :label="2">昨日</el-radio-button>
        <el-radio-button :label="3">近七日</el-radio-button>
        <el-radio-button :label="4">自定义</el-radio-button>
      </el-radio-group>

      <el-date-picker
        v-show="dateType === 4"
        v-model="dateList"
        class="mr-8"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        type="datetimerange"
      />

      <el-button type="primary" @click="initData()">搜索</el-button>
    </section>

    <section class="grid grid-cols-4 gap-4 items-center">
      <el-card>蒲公英发送数量 <strong class="text-2xl ml-4">{{ blockData.send_count }}</strong></el-card>
      <el-card>蒲公英回复数量 <strong class="text-2xl ml-4">{{ blockData.reply_count }}</strong></el-card>
      <el-card>平均回复数量 <strong class="text-2xl ml-4">{{ blockData.average_reply_count }}</strong></el-card>
      <el-card>拉取数量 <strong class="text-2xl ml-4">{{ blockData.pull_count }}</strong></el-card>
      <el-card>进入回声谷用户（UV） <strong class="text-2xl ml-4">{{ blockData.uv }}</strong></el-card>
      <el-card>进入回声谷用户（PV） <strong class="text-2xl ml-4">{{ blockData.pv }}</strong></el-card>
      <el-card>平均回复时间 <strong class="text-2xl ml-4">{{ blockData.average_reply_second }} s</strong></el-card>
    </section>

    <hr class="mt-4 mb-8">

    <el-table :data="tableData" border stripe>
      <el-table-column label="日期" prop="date"/>
      <el-table-column label="发送数量" prop="send_count"/>
      <el-table-column label="回复数量" prop="reply_count"/>
      <el-table-column label="拉取数量" prop="pull_count"/>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button plain type="primary" @click="handleToDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import request from '@/utils/request'
import { getDateListToBackend } from '@/utils'

export default {
  data() {
    return {
      dateType: 1,

      /* date picker */
      dateList: undefined,
      /*
      * card 数据
      * */
      blockData: {},
      /*
      * 表格数据
      * */
      tableData: [],
      meta: {
        page: 1,
        total: 0
      }

    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(page = 1) {
      /*
      * 计算时间
      * */
      let __date = ''
      const start = new Date()
      const end = new Date()

      const today = start.getDate()

      start.setHours(0, 0, 0)
      end.setHours(23, 59, 59)

      switch (this.dateType) {
        case 1:
          break
        case 2:
          start.setDate(today - 1)
          end.setDate(today - 1)
          break
        case 3:
          start.setDate(today - 6)
          break
        case 4:
          break
      }

      if (this.dateList !== undefined && Array.isArray(this.dateList) && this.dateList.length > 0) {
        __date = getDateListToBackend(this.dateList)
      } else {
        __date = getDateListToBackend([start, end])
      }

      try {
        const { data } = await request({
          url: '/dandelion/stat',
          params: { date: __date }
        })

        const { data: { list, meta } } = await request({
          url: '/dandelion/date/stat',
          params: { date: __date, page }
        })
        this.tableData = list
        this.meta.page = meta.page
        this.meta.total = meta.total
        this.blockData = data

      } catch (e) {
        console.error(e)
      }
    },

    handleToDetail(row) {
      this.$router.push({
        path: '/echoValley/record',
        query: {
          date: row.date
        }
      })
    }
  },
  watch: {
    dateType(value) {
      if (value !== 4) {
        this.initData()
      }
    }
  }
}
</script>

<style scoped>

</style>
